.app-container {
	background-color: $uni-bg-color-grey;
	padding: 0 20rpx 40rpx;
	.border{
		border: 2rpx solid $uni-border-color;
	}
	.my-lg{
		margin-top: $uni-spacing-col-lg;
		margin-bottom: $uni-spacing-col-lg;
	}
	.my-sm{
		margin-top: $uni-spacing-col-sm;
		margin-bottom: $uni-spacing-col-sm;
	}
	.flex{
		display: flex;
		&.items-center{
			align-items: center;
		}
		&.justify-center{
			justify-content: center;
		}
		.flex-1{
			flex: 1;
		}
	}
	.category {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		font-size: $uni-font-size-sm;
		background-color: $uni-bg-color;
		border-radius: 20rpx;
		gap: $uni-spacing-row-lg;
		padding: 20rpx;
		.category-item {
			flex-direction: column;
			image {
				width: $uni-img-size-lg;
				height: $uni-img-size-lg;
				border-radius: 99%;
			}
			.name{
				margin-top: 6rpx;
			}
		}
	}
	.hot-box{
		display: flex;
		gap: 20rpx;
		.card-item{
			background-color: $uni-bg-color;
			border-radius: 30rpx;
			flex: 1;
			padding: 20rpx;
			.title{
				font-size: $uni-font-size-lg;
				font-weight: bold;
				margin-right: 10rpx;
			}
			.type{
				background-color: rgb(231, 128, 3);
				color: #fff;
				border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-sm;
				padding: 0 10rpx;
			}
			.tag{
				background-color: rgb(255, 237, 219);
				border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-sm;
				padding: 0 10rpx;
				width: fit-content;
				margin: 4rpx auto 0;
			}
			image{
				width: 100%;
				height: 150rpx;
			}
		}
	}
	.new-people{
		padding: 20rpx;
		background-color: $uni-bg-color;
		border-radius: 20rpx;
		swiper-item{
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: $uni-spacing-row-lg;
			.swiper-item{
				text-align: center;
				image{
					width: 100px;
					height: 100px;
					border-radius: 20rpx;
				}
				.name{
					background-color: #f62c2c;
					color: $uni-text-color-inverse;
					font-size: $uni-font-size-sm;
					border-radius: 20rpx;
					width: fit-content;
					margin: 0 auto 6rpx;
					padding: 6rpx 20rpx;
				}
				.symbol{
					color: #f62c2c;
				}
				.price{
					color: #f62c2c;
					font-size: $uni-font-size-lg;
				}
			}
		}
	}
	.group-buy{
		padding: 20rpx;
		background-color: $uni-bg-color;
		border-radius: 20rpx;
		.header{
			justify-content: space-between;
			.right{
				font-size: $uni-font-size-sm;
			}
		}
		.main{
			padding: 20rpx 0;
			.goods-item{
				display: flex;
				flex-direction: column;
				flex: 0 0 33.33%;
				&:not(:first-child){
					padding-left: 20rpx;
					box-sizing: border-box;
				}
				image{
					width: 100%;
					height: 100px;
					border-radius: 20rpx;
				}
				.name{
					font-size: $uni-font-size-base;
					margin: 6rpx 0;
				}
				.price-info{
					justify-content: space-between;
					.symbol{
						color: #f62c2c;
					}
					.price{
						color: #f62c2c;
						font-size: $uni-font-size-lg;
					}
					.group-btn{
						background-color: #4cd964;
						color: $uni-text-color-inverse;
						font-size: $uni-font-size-sm;
						border-radius: $uni-border-radius-lg;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 6rpx;
					}
				}
			}
		}
	}
	.goods{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: $uni-spacing-row-base;
		.goods-item{
			background-color: $uni-bg-color;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			image{
				width: 100%;
				height: 300rpx;
			}
			.basic-info{
				padding: 10rpx 20rpx;
				.title{
					height: 80rpx;
				}
				.symbol{
					color: #f62c2c;
				}
				.price{
					color: #f62c2c;
					font-size: $uni-font-size-lg;
				}
				.sales{
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
			}
			.buy-btn{
				position: absolute;
				font-size: $uni-font-size-base;
				right: 20rpx;
				bottom: 20rpx;
				background-color: #f62c2c;
				border-radius: 60rpx;
				color: $uni-text-color-inverse;
				padding: 10rpx 30rpx;
			}
		}
	}
}